import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './src/page/Home'
import Orders from './src/page/Orders'
import Shop from './src/page/Shop'
import Center from './src/page/Center'
import Setting from './src/page/Setting';
import MyRelease from './src/page/MyRelease';
import Login from './src/page/Login';
import AgainLogin from './src/page/AgainLogin'
import ChangeAddress from './src/page/ChangeAdress'
import ModifyInformation from './src/page/ModifyInformation'
import DeliveryAddress from './src/page/DeliveryAddress';
import PullRequest from './src/page/PullRequest'
import pullSale from './src/page/PullSale'
import AddAddress from './src/page/AddAddress'
import Register from './src/page/Register'
import Forget from './src/page/Forget'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { AntDesign } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import AuthProvider from './src/context/AuthProvider';
import Chat from './src/page/Chat';
import UserChat from './src/page/UserChat';
import MyPackage from './src/page/Mypackage';
import SubmitOrder from './src/page/SubmitOrder'
import Pay from './src/page/Pay';
import DepositRefund from './src/page/DepositRefund'
import ChooseAddress from './src/page/ChooseAddress'
import Privacy from './src/page/Privacy'
import AboutApp from './src/page/AboutApp'


const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();


const TabBar = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerTitleAlign: 'center'
      }} >
      <Tab.Screen
        name='home'
        component={Home}
        options={
          {
            title: '首页',
            tabBarIcon: ({ color, size, focused }) => (
              focused
                ? <AntDesign
                  name='home'
                  color={color}
                  size={size}
                />
                : <Entypo
                  name='home'
                  color={color}
                  size={size} />
            )
          }
        } />
      <Tab.Screen
        name='Shop'
        component={Shop}
        options={
          {
            title: '购物车',
            tabBarIcon: ({ color, size }) => (
              <Entypo
                name='shopping-cart'
                color={color}
                size={size}
              />
            )
          }
        } />
      <Tab.Screen
        name='orders'
        component={Orders}
        options={
          {
            title: '订单',
            tabBarIcon: ({ color, size }) => (
              <Entypo
                name='archive'
                color={color}
                size={size}
              />
            )
          }
        } />
      <Tab.Screen
        name='Center'
        component={Center}
        options={
          {
            title: '个人中心',
            tabBarIcon: ({ color, size }) => (
              <Entypo
                name='user'
                color={color}
                size={size} />
            )
          }
        } />

    </Tab.Navigator>
  )

}

const APP = () => {
  return (
    <AuthProvider>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
          <Stack.Screen
            name='tab'
            component={TabBar}
            options={{
              headerShown: false
            }}
          />
          <Stack.Screen
            name='Login'
            component={Login}
            options={
              {
                title: '登录'
              }
            }
          />
          <Stack.Screen
            name='AginLogin'
            component={AgainLogin}
            options={{
              title: '切换账号',
              headerShown: false
            }}
          />
          <Stack.Screen
            name='Forget'
            component={Forget}
            options={{
              title: '忘记密码',
              headerShown: false
            }}
          />
          <Stack.Screen
            name='Register'
            component={Register}
            options={{
              title: '注册',
              headerShown: false
            }}
          />
          <Stack.Screen
            name='Order'
            component={Orders}
          />
          <Stack.Screen
            name='个人中心'
            component={Center}
          />
          <Stack.Screen
            name='Setting'
            component={Setting}
            options={
              {
                title: '设置',
              }
            }
          />
          <Stack.Screen
            name='myRelease'
            component={MyRelease}
            options={
              {
                title: '我的发布'
              }
            }
          />
          <Stack.Screen
            name='modifyInformation'
            component={ModifyInformation}
            options={
              {
                title: '修改信息'
              }
            }
          />
          <Stack.Screen
            name='AgainLogin'
            component={AgainLogin}
            options={
              {
                title: '切换账号'
              }
            }
          />
          <Stack.Screen
            name='发布需求'
            component={PullRequest}
          />
          <Stack.Screen
            name='发布出租'
            component={pullSale}
          />
          <Stack.Screen
            name='SubmitOrder'
            component={SubmitOrder}
            options={
              {
                title: '提交订单'
              }
            }
          />
          <Stack.Screen
            name='Pay'
            component={Pay}
            options={
              {
                title: '支付'
              }
            }
          />
          <Stack.Screen
            name='MyRelease'
            component={MyRelease}
            options={
              {
                title: '我的发布'
              }
            }
          />
          <Stack.Screen
            name='DeliveryAddress'
            component={DeliveryAddress}
            options={
              {
                title: '地址'
              }
            }
          />
          <Stack.Screen
            name='ChangeAddress'
            component={ChangeAddress}
            options={
              {
                title: '修改地址'
              }
            }
          />

          <Stack.Screen
            name='AddAddress'
            component={AddAddress}
            options={
              {
                title: '添加收货地址'
              }
            }
          />
          <Stack.Screen
            name='MyPackage'
            component={MyPackage}
            options={
              {
                title: '我的钱包'
              }
            }
          />
          <Stack.Screen
            name='Chat'
            component={Chat}
            options={
              {
                title: '聊天'
              }
            }
          />
          <Stack.Screen
            name='UserChat'
            component={UserChat}
            options={
              {
                title: ''
              }
            }
          />
          <Stack.Screen
            name='DepositRefund'
            component={DepositRefund}
            options={
              {
                title: '退还押金'
              }
            }
          />
          <Stack.Screen
            name='ChooseAddress'
            component={ChooseAddress}
            options={
              {
                title: '选择地址'
              }
            }
          />

          <Stack.Screen
            name='Privacy'
            component={Privacy}
            options={
              {
                title: '隐私'
              }
            }
          />
          <Stack.Screen
            name='AboutApp'
            component={AboutApp}
            options={
              {
                title: '关于APP'
              }
            }
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthProvider>
  )
}

export default APP
